<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../d3-tip.css" />
    <style>
     
    </style>
  </head>
  <body>


    <script src="../d3.js"></script>
    <script src="../d3-v6-tip.js"></script>
    <script>

      const width = 800 ;
      const height = 600 ;
      const svg = d3
        .select("body")
        .append("svg")
        .attr("width", width)
        .attr("height", height)
        .style("border", "1px solid #ccc");


      // const circle = svg.append('circle')
      //   .attr('cx',400)
      //   .attr('cy',300)
      //   .attr('r',50)
      //   .attr('fill','#acf')  
      

      // const drag = d3.drag()
      //   .on('drag',(e,d)=>{
      //     circle.attr('cx',e.x)
      //     circle.attr('cy',e.y)
      //   })

      // circle.call(drag);


      const data = [100,200,300,400,500] ;

      const circles = svg.selectAll('circle')
        .data(data)
        .join('circle')
        .attr('cx',d=>d)
        .attr('cy',100)
        .attr('r',40)
        .attr('fill',(d,i)=>d3.schemeSet2[i])


      let target ;
      const drag = d3.drag()
        .on('start',(e,d)=>{
          target = e.sourceEvent.target ;
        })
        .on('drag',(e,d)=>{
            d3.select(target)
              .attr('cx',e.x)
              .attr('cy',e.y)
        })
        .on('end',()=>{
          target = null ;
        })
      
      circles.call(drag);


    </script>
  </body>
</html>
